<template>
  <div class="showDoor">
    <div class="showDoorDoorCon"><door-img-con /></div>
    <van-button @click="popupVisible = true">选择参数</van-button>
    <van-button @click="fullScreenClick">全屏</van-button>
    <van-popup
      v-model="popupVisible"
      position="bottom"
      get-container="body"
      round
    >
      <div class="specPopupCon">
        <div v-for="(item, index) in specArr" :key="index">
          <spec-con :data="item" @spec-change="specChange" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Button, Popup } from "vant";
import SpecCon from "./components/specCon";
import DoorImgCon from "./components/doorImgCon";
import { fullScreen } from "@/js/utils";
export default {
  components: {
    [Button.name]: Button,
    [Popup.name]: Popup,
    SpecCon,
    DoorImgCon,
  },
  data() {
    return {
      popupVisible: false,
      selectedObj: {},
      specArr: [
        {
          label: "规格",
          id: "s",
          items: [
            {
              label: "1",
              id: "1",
            },
            {
              label: "2",
              id: "2",
            },
          ],
        },
        {
          label: "工艺",
          id: "g",
          items: [
            {
              label: "3",
              id: "1",
            },
            {
              label: "4",
              id: "2",
            },
          ],
        },
      ],
    };
  },
  created() {
    this.specArr.forEach((e) => {
      if (e.items) {
        this.$set(this.selectedObj, e.id, e.items[0].id);
      }
    });
  },
  mounted() {
    document.addEventListener("fullscreenchange", this.fullScreenChange);
  },
  beforeDestroy() {
    document.removeEventListener("fullscreenchange", this.fullScreenChange);
  },
  methods: {
    specChange(e) {
      console.log(e);
      this.$set(this.selectedObj, e.spec.id, e.item.id);
    },
    fullScreenClick() {
      fullScreen();
    },
    fullScreenChange(e) {
      if (document.fullscreenElement) {
        console.log("进入全屏");
      } else {
        console.log("退出全屏");
      }
    },
  },
};
</script>

<style lang="scss">
.showDoor {
  .showDoorDoorCon {
    overflow-x: hidden;
  }
}
.specPopupCon {
  padding: 24px;
}
</style>